import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './Home';
import MotionDrive from './MotionDrive';
import StyleTransfer from './StyleTransfer';
import './App.css';

const App = () => {
  return (
    <Router>
      <nav className="main-nav">
        <div className="nav-content">
          <h1 className="nav-title">图像处理应用</h1>
          <div className="nav-links">
            <Link to="/" className="nav-link">基础图像处理</Link>
            <Link to="/motion-drive" className="nav-link">动作驱动</Link>
            <Link to="/style-transfer" className="nav-link">风格迁移</Link>
          </div>
        </div>
      </nav>
      <main className="main-content">
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route path="/motion-drive" element={<MotionDrive />} />
          <Route path="/style-transfer" element={<StyleTransfer />} />
        </Routes>
      </main>
    </Router>
  );
};

export default App;
